<template>
    <div class="video_list">
        <el-card class="card-full" :header="route.meta.title">
            <el-form :model="searchInfo" inline label-width="auto"
                     @submit.prevent="getTableData">
                <el-form-item label="视频标题">
                    <el-input v-model="searchInfo.keyword" clearable placeholder="请输入视频标题"/>
                </el-form-item>
                <el-form-item label="发布时间">
                    <date-range v-model="dateTime" :default-value="['','']" clearable/>
                </el-form-item>
                <el-form-item class="-ml-5 z-1">
                    <el-button type="primary" @click="getTableData">查询</el-button>
                </el-form-item>
            </el-form>
            <el-tabs class="mt-4" v-model="searchInfo.status" @tab-change="getTableData">
                <el-tab-pane label="全部作品" :name="0"></el-tab-pane>
                <el-tab-pane label="已发布" :name="1"></el-tab-pane>
                <el-tab-pane label="未通过" :name="2"></el-tab-pane>
            </el-tabs>
            <el-table :data="tableData" :border="tableData.length" :show-header="tableData.length">
                <template #empty>
                    <empty desc="暂时没有更多，快去发布作品吧">
                        <router-link to="/publish">
                            <el-button type="primary" size="large" class="w-[116px]">去发布</el-button>
                        </router-link>
                    </empty>
                </template>
                <el-table-column label="视频封面" width="90">
                    <template #default="scope">
                        <el-image lazy :src="scope.row.coverImg"
                                  :hide-on-click-modal="true"
                                  :preview-teleported="true"
                                  :preview-src-list="[scope.row.coverImg]"
                                  class="w-9 h-14 !block mx-auto" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="视频标题" show-overflow-tooltip min-width="150"></el-table-column>
                <el-table-column prop="content" label="视频简介" show-overflow-tooltip min-width="200"></el-table-column>
                <el-table-column prop="playNum" label="播放/收藏/分享" min-width="180">
                    <template #default="scope">
                        <span>{{ Number(scope.row.playNum) }}</span>
                        <span class="pl-1 pr-1">/</span>
                        <span>{{ Number(scope.row.collectNum) }}</span>
                        <span class="pl-1 pr-1">/</span>
                        <span>{{ Number(scope.row.shareNum) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="上传时间" min-width="180"></el-table-column>
                <!--                <el-table-column label="操作" width="120">-->
                <!--                    <template #default="scope">-->
                <!--                        <el-button size="small" style="&#45;&#45;el-button-text-color:#555" link icon="delete">删除</el-button>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
            </el-table>

            <El-pagination
                :paginationParams="paginationParams"
                @pageChange="pageChange"
                @pageSizeChange="pageSizeChange"
            />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed} from 'vue'
import {useRoute} from "vue-router";
import DateRange from "@/components/daterange.vue";
import type {paginationParamsType} from "@/components/ElementPlus_components/el-pagination/type";
import {getListApi} from "@/api/video/data";

const route = useRoute()
const searchInfo = ref({
    keyword: '',
    status: 0,
})

const dateTime = ref([])
const tableData = ref([]);
const paginationParams = reactive(<paginationParamsType>{
    page: 1,
    pageSize: 10,
    total: 100,
})
const pageChange = (val: number) => {
    // message("info", "当前页变化")
    paginationParams.page = val
    getTableData();
}
const pageSizeChange = (val: number) => {
    // message("info", "每页条数变化")
    paginationParams.pageSize = val
    getTableData();
}

const getTableData = async () => {
    const res: any = await getListApi({
        current: paginationParams.page,
        size: paginationParams.pageSize,
        ...searchInfo.value,
        startTime: dateTime.value[0],
        endTime: dateTime.value[1]
    });
    if (res.success) {
        tableData.value = res.data.records || [];
        paginationParams.total = res.data.total;
    }
}
onMounted(() => {
    getTableData();
});

</script>

<style lang="scss" scoped>
.video_list {

}
</style>
